<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  	<%@ include file="../../../include/easyui.jsp" %>
	<%@ include file="../../../include/pForm.jsp" %>
	<%@ include file="../../../include/pGrid.jsp" %>
    <title>流程配置</title>
    <script>
	   $(function(){
			var data = fn.getDialogData();
			$("#img").attr("src","/console/activiti/processDefinition/imageView?deploymentId="+data.deploymentId + "&imageName="+data.diagramResourceName);
			
			loadProcessTrace(data.key);
			
			
			function loadProcessTrace(key){  
                var traceUrl = '/console/activiti/getProcessTrace?wfKey='+ key;  
                $.getJSON(traceUrl,function(infos){  
                    var html = [];  
                    $.each(infos,function(i,v){  
                        var $div = $('<div/>', {'class': 'activity-attr'})
						.css({  
                            position: 'absolute',  
                            left: v.x,  
                            top: v.y,  
                            width: v.width - 3,  
                            height:v.height - 3,  
                            opacity: 0.3,  
                            zIndex: 100,  
                    		cursor : 'pointer'})
						.attr({'actId':v.actId,'name':v.name ,'type':v.type });  
						html.push($div.prop("outerHTML"));
                    }); 
					html = html.join(""); 
                    $('<div />',{'id':'processRect'}).html(html).appendTo("#flowImageAndRect");  

					/*点击事件配置*/
					$(".activity-attr").not("[type=endEvent],[type=startEvent]").hover(function(){
					    $(this).css({"background-color":"red","border": "5px","border-radius":"10px"});
					},function(){
						$(this).css("background-color","");
					}).on("click",function(){
						var $this = $(this),
							taskName = $this.attr("name"),
							taskId = $this.attr("actId"),
							taskType = $this.attr("type");
						var data = { 'taskName': taskName , 'taskId':taskId, 'taskType':taskType,'processKey': key };
						var href = '/console/page?pageName=activiti/deploy/configTask' ;
						p.gridAdd({href:href, title : taskName, width : 800, height : 420,data: data });
					});
                });  
            }  
		});
    </script>
  </head>
  
  <body>
  	 <div id="flowImageAndRect"></div>  
   	<div>
  		<img id="img" alt="当前流程图"  style="position: absolute;top: 0;left: 0;"  />
 	</div>
  </body>
</html>
